﻿<template id="grid-template">
    <style>        
        .table-fixed-data table {
            margin: 0px;
        }
        .table-fixed-hidden {
            margin-top: -40px !important;
        }
        #search {
            margin-bottom: 10px;
        }        
        /* 数据父层*/
        .table-fixed-data {
            height: 520px;
            overflow-x: auto;
            overflow-y: hidden;
            table-layout: fixed;
            border: 1px solid #CCC;
            position: relative;
        }
        .table-fixed-header {
            position: absolute;
            left: 0px;
        }
        .table-fixed-body {
            position: absolute;
            top:40px;
            left: 0px;
            height: 420px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .table-fixed-foot {
            position: absolute;
            left: 0px;
            bottom:0px;
        }
        .table-fixed-foot table {            
            margin-bottom: 2px;
        }
         .fixed-table-pagination .pagination-detail, .fixed-table-pagination div.pagination {
            margin-top: 10px;
            margin-bottom: 10px;
        }
        .fixed-table-pagination .pagination-info {
            line-height: 34px;
            margin-right: 5px;
        }
        .fixed-table-pagination .page-list {
            display: inline-block;
        }
        .fixed-table-pagination div.pagination .pagination {
            margin: 0;
        }
        .loading {
            position: absolute;
            top: 60%;
            left: 50%;
            width: auto;
            z-index: 1000;
            padding: 2px 4px 2px 4px;
            text-align: center;
            font-weight: 700;
        }
        .table-fixed {
            table-layout: fixed;
        }
        .table-fixed td {
            text-overflow: ellipsis;
        }
    </style>
    <div class="table-container">
        <slot name="customSearch"></slot>
        <div class="table-toolBar row" v-show="showToolbar" style="margin-bottom:10px;">
            <div class="col-xs-4 col-md-4">
                <div class="input-group">
                    @*<span class="input-group-addon" v-if="showSearch"><i class="fa fa-search"></i></span>*@
                    @*<input name="query" class="form-control" placeholder="表内搜索" v-model="filterKey" v-if="showSearch">*@
                    <slot name="customButtons"></slot>                    
                </div>
            </div>
            <div class="col-xs-2 col-md-2">
                <p v-show="showLoading" class="bg-primary loading">加载中...</p>
            </div>
            <div class="col-xs-6 col-md-6">
                <div class="btn-group pull-right">
                    <div class="btn-group" title="选择列">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <i class="glyphicon glyphicon-th icon-th"></i>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li v-for="key in columns" class="list-group-item"><label style="cursor:pointer"><input type="checkbox" v-model="key.visible" /> {{key.localName}}</label></li>
                        </ul>
                    </div>
                    <button class="btn btn-default" type="button" title="刷新" v-on:click="loadData"><i class="glyphicon glyphicon-refresh icon-refresh"></i></button>
                    <button class="btn btn-default" type="button" title="显示分页" v-on:click="showPage"><i class="glyphicon glyphicon-list"></i></button>
                    <button class="btn btn-default" title="导出excel" v-on:click="toExcel" v-if="showtoexcel"><i class="glyphicon glyphicon-export icon-share"></i></button>  
                </div>
            </div>
        </div>
        <div class="table-fixed-data ">
            <div id="tbHeader" class="table-fixed-header">
                <table class="table table-bordered table-hover table-fixed">
                    <thead>
                        <tr>
                            <th class="text-center" width="{{indexWidth}}"></th>
                            <th v-if="showallcheckbox" width="30px"><input v-on:click="checkAll($event.target.checked)" type="checkbox" /></th>
                            <th v-else width="30px"></th>
                            <template v-for="key in columns">
                                <template v-if="key.visible">
                                    <th @*v-on:click="sortBy(key.name)"*@ v-bind:class="{active: sortKey == key.name}" v-bind:style="{width:key.width}">
                                        <div>
                                            {{key.localName | capitalize}}
                                            @*<span class="glyphicon" v-bind:class="sortOrders[key.name] > 0 ? ' glyphicon-triangle-top' : 'glyphicon-triangle-bottom'"></span>*@
                                        </div>
                                    </th>
                                </template>
                            </template>
                            <th></th>
                        </tr>
                    </thead>
                </table>
            </div>
            <div id="tbBody" class="table-fixed-body " >
                <table class="table table-bordered table-hover table-fixed">
                    @*<thead>
                        <tr>
                            <th class="text-center" width="{{indexWidth}}"></th>
                            <th v-if="showallcheckbox" width="30px"><input v-on:click="checkAll($event.target.checked)" type="checkbox" /></th>
                            <th v-else width="30px"></th>
                            <template v-for="key in columns">
                                <template v-if="key.visible">
                                    <th v-on:click="sortBy(key.name)" v-bind:class="{active: sortKey == key.name}" v-bind:style="{width:key.width}">
                                        <div>
                                            {{key.localName | capitalize}}
                                            <span class="glyphicon" v-bind:class="sortOrders[key.name] > 0 ? ' glyphicon-triangle-top' : 'glyphicon-triangle-bottom'"></span>
                                        </div>
                                    </th>
                                </template>
                            </template>
                            <th></th>
                        </tr>
                    </thead>*@
                    <tbody>
                        <tr v-show="data.length==0"><td class="text-center text-danger">暂无数据</td></tr>
                        <tr v-for="(index,entry) in data | filterBy filterKey | orderBy sortKey sortOrders[sortKey]" v-on:click="selectRow(index)" style="cursor: pointer" class="{{rowClassName(entry,index)}}">
                            <td class="text-center" width="{{indexWidth}}">{{index+1}}</td>
                            <td v-show="showCheckbox" width="30px"><input type="checkbox" v-model="data[index].checked" /></td>
                            <template v-for="key in columns">
                                <template v-if="key.visible">
                                    <td v-bind:style="{width:key.width}">{{{setColumnStyle(key.style,entry[key.name],entry[id],entry)}}}</td>
                                </template>
                            </template>
                            <td>
                                <div class="btn-group btn-group-sm" role="group" aria-label="...">
                                    <button v-for="(idx,btn) in buttons" type="button" class="btn btn-flat {{btn.className==undefined?'btn-default':btn.className}}"
                                            v-on:click.stop="clickButton(entry,btn)">
                                        {{btn.text}}
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                    @*<tfoot v-show="showSum">
                        <tr>
                            <td width="{{indexWidth}}"></td>
                            <td v-show="showCheckbox" width="30px"></td>
                            <template v-for="key in columns">
                                <template v-if="key.visible">
                                    <td v-bind:style="{width:key.width}"><b class="text-danger">{{key.sum}}</b></td>
                                </template>
                            </template>
                            <td></td>
                        </tr>
                    </tfoot>*@
                </table>
            </div> 
            <div v-show="showSum" class="table-fixed-foot">
                <div class="table-Sum">
                    <table class="table table-bordered table-hover table-fixed">
                        <tr>
                            <td width="{{indexWidth}}"></td>
                            <td v-show="showCheckbox" width="30px"></td>
                            <template v-for="key in columns">
                                <template v-if="key.visible">
                                    <td v-bind:style="{width:key.width}"><b class="text-danger">{{key.sum}}</b></td>
                                </template>
                            </template>
                            <td></td>
                        </tr>
                    </table>
                </div>
            </div>                     
        </div>
         
        <div class="fixed-table-pagination" v-if="showPagination">
            <div class="pull-left pagination-detail">
                <span class="pagination-info">总共<span class="text-red"> {{total}} </span>条记录 每页 </span>
                <div class="page-list">
                    <div class="btn-group dropup">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span class="page-size">{{pageSize}}</span> <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li v-for="page in pageSizes"><a v-on:click.prevent="changePageSize(page)">{{page}}</a></li>
                        </ul>
                    </div> 记录
                </div>
            </div>
            <div class="pull-right pagination">
                <ul class="pagination" style="cursor:pointer">
                    <li><a v-on:click.prevent="goFirst()">首页</a></li>
                    <li><a v-on:click.prevent="goPrevious()">上一页</a></li>
                    <li v-for="page in maxPageNumber" v-bind:class="{active:getPageNumber(page) == pageIndex}"><a v-on:click.prevent="gotoPage(getPageNumber(page))">{{getPageNumber(page)}}</a></li>
                    <li><a title="下{{pageNumber}}页" v-on:click.prevent="gotoPage(getNextPitchNumber())">...</a></li>
                    <li><a v-on:click.prevent="goLast()">{{pages}}</a></li>
                    <li><a v-on:click.prevent="goNext()">下一页</a></li>
                </ul>
            </div>
        </div>
    </div>
    <div class="clearfix"></div> 
</template>
